import React, {
    Component,
} from 'react';

import {
    TouchableWithoutFeedback,
    ScrollView,
    FlatList,
    View
} from 'react-native';

import { connect } from 'react-redux';

import {CachedImageBackground} from "react-native-img-cache";

import { list as livelist } from '../../actions/live';

import Banner from '../../components/banner';
import TabHeader from '../../components/tabheader';
import CXIcon from "../../components/cxicon/CXIcon";

import styles from "./css/online";

class LiveTab extends Component {

    static navigationOptions = ({ navigation }) => {
        return {
            title: '直播',
            tabBarIcon: ({focused, tintColor})=>(
                <CXIcon name="videoon_tab" size={25} color={tintColor} />
            ),
        };
    }

    constructor(props){
        super(props);
        this.state = {
            livelist: []
        }
    }

    componentDidMount(){
        livelist((list)=>{
            this.setState({livelist: list});
        });
    }

    render() {
        return (
            <View style={styles.container}>
                <TabHeader title="直播" left={
                    <CXIcon name='winner' size={20}></CXIcon>
                }>
                </TabHeader>
                <ScrollView>
                    <Banner list={this.props.banner} />
                    <View style={styles.listBox}>
                        <FlatList
                            keyExtractor={(item, index) => "hotlist_"+index} 
                            data={this.state.livelist}
                            initialNumToRender={8}
                            numColumns={2}
                            horizontal={false}
                            renderItem={({item}) => 
                                <View key={"hotlistitem+"+item.roomid} style={styles.listItem}>
                                    <TouchableWithoutFeedback
                                    onPress={() => {
                                        this.props.navigation.navigate('LiveDetail', {
                                            transition: 'pop', 
                                            source: item.pull_stream,
                                            chatRoomid: item.chatRoomid
                                        });
                                    }}
                                    >
                                        <CachedImageBackground
                                            style={styles.itemBg}
                                            defaultSource={require('./imgs/default_dynamic_bg.png')}
                                            source={{ uri: item.roombg }} />
                                    </TouchableWithoutFeedback>
                                </View>
                            }
                        />
                    </View>
                </ScrollView>
            </View>
        )
    }
}

function mapStateToProps(state) {
    return {
      banner: state.banner.live_banner
    }
  }
  
  export default connect(mapStateToProps)(LiveTab);